<template lang="html">
  <div class="">
    <div class="add">
      <el-button type="primary" @click="add">新增本机检测</el-button>
    </div>
    <tableVue :list="list" :state="false" v-loading="pageData.loading" :pagination="true">
        <slot>
          <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="compile(scope.row)">编辑
                </el-button>
                <el-button
                  size="mini"
                  type="danger"
                  class="del"
                  @click="del(scope.row,2)">删除</el-button>
              </template>
          </el-table-column>
        </slot>
    </tableVue>
    <dialogVue title="操作" :dialog="dialog" @close="changeData" :state="false">
        <slot>
              <el-form :model="pageData" ref="ruleForm" label-width="120px" class="demo-ruleForm">
                    <el-form-item label="选项编码">
                      <el-input v-model="pageData.optionCode" placeholder="请输入内容"></el-input>
                   </el-form-item>
                    <el-button type="primary" class="boban" @click="selectTemplate">选择模板</el-button>
                   <el-form-item label="选项名称">
                     <el-input v-model="pageData.optionName" placeholder="请输入内容"></el-input>
                  </el-form-item>
                  <el-form-item label="估计方式">
                    <el-select v-model="pageData.reduceType" placeholder="请选择" @change="getType">
                        <el-option value="">请选择</el-option>
                        <el-option
                          v-for="item in isreduceType"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                    </el-select>
                   </el-form-item>
                   <el-form-item label="百分比" v-show="isreducePercent">
                     <el-input v-model="pageData.reducePercent" placeholder="请输入内容"></el-input>
                  </el-form-item>
                  <el-form-item label="固定金额" v-show="isreduceAmount">
                    <el-input v-model="pageData.reduceAmount" placeholder="请输入内容"></el-input>
                 </el-form-item>
                  <el-form-item label="别名" v-if="isAlias == 'Y'">
                    <el-input v-model="pageData.aliasName" placeholder="请输入内容"></el-input>
                 </el-form-item>
                 <el-form-item label="排序">
                   <el-input v-model="pageData.ordinal" placeholder="请输入内容"></el-input>
                </el-form-item>
                <el-form-item class="confirm">
                  <el-button type="primary" v-if="btnState == '1'" @click="addForm('post')">提交</el-button>
                   <el-button type="primary" v-if="btnState == '2'" @click="addForm('put')">更新</el-button>
                </el-form-item>
            </el-form>
        </slot>
    </dialogVue>
    <el-dialog
      title="提示"
      :visible.sync="selectTemplateVal"
       width="30%">

        <el-form :model="templateData" ref="ruleForm" label-width="120px" class="demo-ruleForm">
          <el-form-item label="系统类型">
            <el-select v-model="templateData.type" placeholder="请选择" @change="getTemplateData">
                <el-option value="">请选择</el-option>
                <el-option
                  v-for="item in systemType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
           </el-form-item>
          <el-form-item label="选择模板">
            <el-select v-model="templateData.optionId" placeholder="请选择" :disabled='disabled'>
                <el-option value="">请选择</el-option>
                <el-option
                  v-for="item in Multiple"
                  :key="item.value"
                  :label="item.optionName"
                  :value="item.cpidtTplId">
                </el-option>
              </el-select>
           </el-form-item>
        </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="selectTemplateVal = false">取 消</el-button>
        <el-button type="primary" @click="templateConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Data from './localDetectionData.js'
import dialogVue from '@/components/dialog.vue'
import tableVue from '@/components/alltable.vue'
import {
  localList,
  getDetails,
  addLocalProduct,
  prouductLocalList,
  delProuductLocal,
  systemTypeList
} from "@/api/product/product";
export default {
  components : {
    tableVue,
    dialogVue
  },
  data () {
    return JSON.parse(JSON.stringify(Data))
  },
  mounted () {
    this.getProuductLocal();
      localList().then(res=>{
        if (res.data.code == 'OK') {

        } else {
            this.$message.error('拉取模板失败');
        }
      })
  },
  methods : {
    getTemplateData (val) {
       if (!val) {
         this.disabled = true;
         return false
       }
      systemTypeList(val).then(res=>{
        if (res.data.code == 'OK') {
            this.Multiple = res.data.data;
            this.disabled = false
        } else {
            this.$message.error('拉取模板失败');
        }
      })
    },
    getType () {
      if (this.pageData.reduceType == 'PERCENT') {
          this.isreducePercent = true;
          this.isreduceAmount  = false;
      } else if (this.pageData.reduceType == 'AMOUNT'){
          this.isreduceAmount  = true;
          this.isreducePercent = false;
      } else {
            this.isreducePercent = false;
            this.isreduceAmount  = false;
          }
    },
    getProuductLocal () {
        // this.pageData.loading = true;
      prouductLocalList(JSON.parse(this.$route.query.item)).then(res=>{
        if (res.data.code == 'OK') {
          this.list.tbody = res.data.data.map(item=>{
            item.gmtCreate = this.switchTime(item.gmtCreate);
            item.gmtUpdate = this.switchTime(item.gmtUpdate);
            return item;
          });
            // this.pageData.loading = false;
        } else {
          this.$message.error('拉取列表数据失败');
        }
      })
    },
    templateConfirm () {//选择模板确定
      getDetails(this.templateData.optionId).then(res=>{
        if (res.data.code == 'OK') {
            this.pageData = res.data.data;
            this.isAlias = res.data.data.isAlias;
            this.selectTemplateVal = false;
        } else {
            this.$message.error(res.data.message);
        }
      })
    },
    changeData (data) {
      this.dialog = data;
    },
    add () {
      this.dialog = true;
      this.btnState = '1';
      this.isAlias = 'Y';
      this.optionId = '';
      this.pageData = {};
      this.getType();
    },
    selectTemplate () {
      this.selectTemplateVal = true;
      this.templateData = {};
      this.disabled = true;
    },
    compile (item) {
      this.dialog = true;
      this.pageData = item;
      this.btnState = '2';
      this.optionId = item.optionId;
      this.getType();
    },
    del (id) {
      this.delMessage(()=>{
        delProuductLocal(id.optionId).then(res=>{
          if (res.data.code == 'OK') {
            this.$message.success('删除成功');
              this.getProuductLocal();
          } else {
            this.$message.error(res.data.message);
          }
        })
      })
    },
    addForm (method) {
        var data = {
          optionCode : this.pageData.optionCode,
          optionName : this.pageData.optionName,
          aliasName : this.pageData.aliasName = this.pageData.aliasName == undefined ? '' : this.pageData.aliasName,
          ordinal : this.pageData.ordinal = this.pageData.ordinal == undefined ? '' : this.pageData.ordinal,
          productId : JSON.parse(this.$route.query.item),
          optionId : this.optionId,
          reduceType : this.pageData.reduceType,
          reducePercent : this.pageData.reducePercent,
          reduceAmount : this.pageData.reduceAmount
        }
        addLocalProduct(data,method).then(res=>{
          if (res.data.code == 'OK') {
            if (method == 'post') {
                this.$message.success('新增成功');
                this.dialog = false;
                this.getProuductLocal();
            } else {
                this.$message.success('编辑成功');
                this.dialog = false;
                this.getProuductLocal();
            }
          } else {
            this.$message.error(res.data.message);
          }
        })
    }
  }
}
</script>

<style scoped>
  .confirm {
    position: absolute;
    bottom: -98px;
    right: 80px;
  }
  .boban {
    position: absolute;
    top: 19px;
    right: 85px;
  }
  .el-form {
    position: relative;
  }
</style>
